<template>
	<div>

		<el-row>
			<el-col>
				<div style="height: 0.5em;"></div>
			</el-col>

			<el-row :gutter="24">
				<el-col :span="1" style="margin-right:15px;">
					<p class="queryLabel">区域:</p>
				</el-col>
				<el-col :span="3">
					<el-select size="small" style="width: 100%;" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
						<el-option v-for="item in areaCombo2" :label="item.label" :value="item.code"></el-option>
					</el-select>
				</el-col>

				<el-col :span="1" style="margin-right:15px;">
					<p class="queryLabel">品牌:</p>
				</el-col>
				<el-col :span="3">
					<el-select size="small" style="width: 100%;" v-model="brand" placeholder="请选择品牌名称" @change="getCompanyInfo" clearable>
						<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
					</el-select>
				</el-col>
				<el-col :span="1" style="margin-right:15px;">
					<p class="queryLabel">公司:</p>
				</el-col>
				<el-col :span="3" style="text-align: center;">
					<el-select size="small" style="width: 100%;" v-model="companyId" @change="getAreaCombo" placeholder="请选择公司名称" clearable>
						<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
					</el-select>
				</el-col>
			</el-row>
			<el-col :span="1" class="labelCol">
				<p class="labelText">基盘月份:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" v-model="baseMon" format="yyyy-MM" :editable=false type="month" placeholder="选择月份">
				</el-date-picker>
			</el-col>
			<el-col :span="1" class="labelCol">
				<p class="labelText">考核期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" v-model="mDate" format="yyyy-MM-dd" :editable=false type="date" placeholder="选择日期">
				</el-date-picker>
			</el-col>

			<el-col :span="1" :offset="1" style="padding-left: 0px;">
				<el-button type="primary" size="small" v-on:click='baseQuery'>查询</el-button>
			</el-col>
			<el-col :span="17" style="margin-left: -10px;text-align: right;">
				<el-button v-if="table == '3'" type="primary" size="small" v-on:click='back'>返回</el-button>
				<el-button type="primary" size="small" v-on:click='lookReport'>报表说明</el-button>
				<el-button class="el-icon-menu" type="primary" size="small" v-on:click='change'></el-button>
			</el-col>

		</el-row>

		<el-tabs v-model="tabsName" @tab-click="tabClick">
			<!--标签1-->
			<el-tab-pane label="首保回站率" name="first">
				<div>
					<div v-if="table == '1'" style="display:block">
						<div class="report_Fixedwidth">
							<table cellspacing="0" cellpadding="0" width="1180px" class="report_table">
								<tbody>
									<tr class="texttbody">
										<th scope="col" colspan="3">首保回站统计</th>
									</tr>
									<tr class="texttbody">
										<td style="width: 280px">基盘月销售客户数</td>
										<td style="width: 280px">考核期首保回厂数</td>
										<td style="width: 280px">回厂率</td>

										<tr v-for="(item,index) in sbCountData.dataList">
											<!--首保-->
											<td>
												<div v-if="item.sb==null || item.sb=='0'">
													{{item.sb==null?0:item.sb}}
												</div>
												<div v-else>
													<el-button type="text" @click='textOnclick(index,item.id,"sb")'>
														{{item.sb==null?0:item.sb}}
													</el-button>
												</div>

											</td>
											<td>
												<div v-if="item.sbhc==null || item.sbhc=='0'">
													{{item.sbhc==null?0:item.sbhc }}
												</div>
												<div v-else>
													<el-button type="text" @click='textOnclick(index,item.id,"sbhc")'>
														{{item.sbhc==null?0:item.sbhc }}
													</el-button>
												</div>

											</td>
											<td>
												{{ (item.lv==null?0:item.lv)+"%" }}
											</td>

										</tr>

								</tbody>
							</table>
						</div>
					</div>
					<div v-if="table == '2'" style="display:block;">
						<div class="report_Fixedwidth">
							<div class="report_card" v-for="item in sbCountData.dataList">
								<div class="report_kapian">

									<br> 全部
								</div>
								<div class="report_text">
									<br> 基盘客户数/首保回厂数：{{item.sb}}/{{item.sbhc}}

									<br>回厂率： {{(item.sb =='0'||item.sbhc=='0'||item.sbhc==null||item.sb==null )?"0.00%":parseFloat(item.sbhc*100/item.sb).toFixed(2)+"%"}}

								</div>
							</div>
						</div>
					</div>
					<div v-if="table == '3'">
						<el-table :data="detailData.detailDataList" border style="width: 100%;align-content: center;" v-loading="loading" element-loading-text="拼命加载中">
							<el-table-column label="vin" prop="vin" width="180">
							</el-table-column>
							<el-table-column label="车牌" prop="plateNum" width="150">
							</el-table-column>
							<el-table-column label="车主" prop="ownerName" width="150">
							</el-table-column>
							<!--<el-table-column label="车主电话" prop="ownerTel" width="150">
																																							</el-table-column>-->
							<el-table-column label="手机号" prop="ownerTel" width="100">
							</el-table-column>
							<el-table-column label="车系" prop="series" width="150">
							</el-table-column>
							<el-table-column label="车型" prop="model" width="150">
							</el-table-column>
							<el-table-column label="购买时间" prop="buyDate" width="150" :formatter="timeCov">
							</el-table-column>
							<el-table-column label="车龄" prop="carAge" width="150">
							</el-table-column>
						</el-table>
						<el-pagination smalnbl @size-change="handleSizeChanges" @current-change="handleCurrentChanges" :current-page="CurentPages" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="detailData.total">
						</el-pagination>
					</div>
				</div>
			</el-tab-pane>
			<!--标签2-->
			<el-tab-pane label="基盘回站率" name="thecondes">
				<div>
					<div v-if="table == '1'" style="display:block">
						<div class="report_Fixedwidth">
							<table cellspacing="0" cellpadding="0" width="1180px" class="report_table">
								<tbody>
									<tr class="texttbody">
										<th scope="col" rowspan="2" colspan="2" style="width: 80px">客户经理</th>
										<th scope="col" colspan="3">二保</th>
										<th scope="col" colspan="3">三保</th>
										<th scope="col" colspan="3">定保</th>
										<th scope="col" colspan="3">合计</th>
									</tr>
									<tr class="texttbody">

										<td style="width: 80px">首保客户数</td>
										<td style="width: 80px">二保回厂数</td>
										<td style="width: 80px">回厂率</td>

										<td style="width: 80px">二保客户数</td>
										<td style="width: 80px">定保回厂数</td>
										<td style="width: 80px">回厂率</td>

										<td style="width: 80px">定保客户数</td>
										<td style="width: 80px">定保回厂数</td>
										<td style="width: 80px">回厂率</td>

										<td style="width: 80px">合计基盘</td>
										<td style="width: 80px">合计回厂</td>
										<td style="width: 80px">合计回厂率</td>
										<tr v-for="(item,index) in dbCountData.dataList">
											<td colspan="2">{{item.uName}}</td>
											<!--二保-->
											<td>
												<div v-if="item.sb==null || item.sb=='0'">
													{{item.sb==null?0:item.sb}}
												</div>
												<div v-else>
													<el-button type="text" @click='textOnclick1(index,item.id,"sb")'>
														{{item.sb==null?0:item.sb}}
													</el-button>
												</div>
											</td>
											<td>
												<div v-if="item.sbhc==null || item.sbhc=='0'">
													{{item.sbhc==null?0:item.sbhc }}
												</div>
												<div v-else>
													<el-button type="text" @click='textOnclick1(index,item.id,"sbhc")'>
														{{item.sbhc==null?0:item.sbhc }}
													</el-button>
												</div>
											</td>
											<td>
												{{(item.sb =='0'||item.sbhc=='0'||item.sbhc==null||item.sb==null )?"0.00%":parseFloat(item.sbhc*100/item.sb).toFixed(2)+"%"}}
											</td>

											<!--三保-->
											<td>
												<div v-if="item.eb==null || item.eb=='0'">
													{{item.eb==null?"0":item.eb}}
												</div>
												<div v-else>
													<el-button type="text" @click='textOnclick1(index,item.id,"eb")'>
														{{item.eb==null?"0":item.eb}}
													</el-button>
												</div>
											</td>
											<td>
												<div v-if="item.ebhc==null || item.ebhc=='0'">
													{{item.ebhc==null?0:item.ebhc}}
												</div>
												<div v-else>
													<el-button type="text" @click='textOnclick1(index,item.id,"ebhc")'>
														{{item.ebhc==null?0:item.ebhc}}
													</el-button>
												</div>

											</td>
											<td>
												{{item.eb=='0'||item.ebhc=='0'||item.eb==null||item.ebhc==null?"0.00%":parseFloat(item.ebhc*100/item.eb).toFixed(2)+"%"}}
											</td>

											<!--定保-->
											<td>
												<div v-if="item.db==null || item.db=='0'">
													{{item.db==null?"0":item.db}}
												</div>
												<div v-else>
													<el-button v-if="item.db!=null" type="text" @click='textOnclick1(index,item.id,"db")'>
														{{item.db==null?"0":item.db}}
													</el-button>
												</div>

											</td>
											<td>
												<div v-if="item.dbhc==null || item.dbhc=='0'">
													{{item.dbhc==null?0:item.dbhc}}
												</div>
												<div v-else>
													<el-button type="text" @click='textOnclick1(index,item.id,"dbhc")'>
														{{item.dbhc==null?0:item.dbhc}}
													</el-button>
												</div>

											</td>
											<td>
												{{item.db=='0'||item.dbhc=='0'||item.dbhc==null||item.eb==null?"0.00%":parseFloat(item.dbhc*100/item.db).toFixed(2)+"%"}}
											</td>

											<!--合计-->
											<td>
												<div v-if="item.sb + item.eb+item.db=='0'">
													{{ item.sb + item.eb+item.db }}
												</div>
												<div v-else>
													<el-button type="text" @click='textOnclick1(index,item.id,"total")'>
														{{ item.sb + item.eb+item.db }}
													</el-button>
												</div>

											</td>
											<td>
												<div v-if="item.sbhc + item.ebhc +item.dbhc=='0'">
													{{ item.sbhc + item.ebhc +item.dbhc }}
												</div>
												<div v-else>
													<el-button type="text" @click='textOnclick1(index,item.id,"totalhc")'>
														{{ item.sbhc + item.ebhc +item.dbhc }}
													</el-button>
												</div>

											</td>
											<td>
												{{(item.sb + item.eb+item.db) =='0'||( item.sbhc + item.ebhc +item.dbhc)=='0' ?"0.00%":parseFloat(( item.sbhc + item.ebhc +item.dbhc)*100/(item.sb + item.eb+item.db)).toFixed(2)+"%"}}
											</td>

										</tr>

								</tbody>
							</table>
						</div>
					</div>
					<div v-if="table == '2'" style="display:block;">
						<div class="report_Fixedwidth">
							<div class="report_card" v-for="item in dbCountData.dataList">
								<div class="report_kapian">
									{{item.uName}}
									<br> 客户经理
								</div>
								<div class="report_text">
									首保/二保回厂：{{item.sb}}/{{item.sbhc}}
									<br> 二保/定保回厂：{{item.eb}}/{{item.ebhc}}
									<br> 定保/定保回厂：{{item.db}}/{{item.dbhc}}
									<br> 合计/总回厂：{{item.sb + item.eb+item.db}}/{{item.sbhc + item.ebhc+item.dbhc}}

									<br>
								</div>
							</div>
						</div>
					</div>
					<div v-if="table == '3'">
						<el-table :data="detailData.detailDataList" border style="width: 100%;align-content: center;" v-loading="loading" element-loading-text="拼命加载中">
							<el-table-column label="vin" prop="vin" width="180">
							</el-table-column>
							<el-table-column label="车牌" prop="plateNum" width="150">
							</el-table-column>
							<el-table-column label="车主" prop="ownerName" width="150">
							</el-table-column>
							<!--<el-table-column label="车主电话" prop="ownerTel" width="150">
																																							</el-table-column>-->
							<el-table-column label="手机号" prop="ownerTel" width="100">
							</el-table-column>
							<el-table-column label="车系" prop="series" width="150">
							</el-table-column>
							<el-table-column label="车型" prop="model" width="150">
							</el-table-column>
							<el-table-column label="购买时间" prop="buyDate" width="150" :formatter="timeCov">
							</el-table-column>
							<el-table-column label="车龄" prop="carAge" width="150">
							</el-table-column>
						</el-table>
						<el-pagination smalnbl @size-change="handleSizeChanges" @current-change="handleCurrentChanges" :current-page="CurentPages" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="detailData.total">
						</el-pagination>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
		<!--报表说明-->
		<el-dialog title="报表说明" v-model="reportShow" size="tiny">
			<div style="overflow-y: scroll;height: 400px;">
				<b style="font-size: 15px;">首保回站率：</b><br><br>
				<b style="font-size: 15px;">基盘客户数：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">当前时间段内客户总数</b><br><br>
				<b style="font-size: 15px;">首保回厂数：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">首保回厂客户数</b><br><br>
				<b style="font-size: 15px;">回厂率：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">首保回厂数与基盘客户数之比</b><br><br>
				<b style="font-size: 15px;">基盘回站率：</b><br><br>
				<b style="font-size: 15px;">二保：</b><br><br>
				<b style="font-size: 15px;">首保客户数：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">新购车辆，自质保开始日起，第三个月为车辆首保日期</b><br><br>
				<b style="font-size: 15px;">二保回厂数：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">首保回厂的客户数</b><br><br>
				<b style="font-size: 15px;">回厂率：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">二保回厂数与首保客户数之比</b><br><br>
				<b style="font-size: 15px;">三保：</b><br><br>
				<b style="font-size: 15px;">二保客户数:</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">车辆首保后的里程增加5000公里或时间的第六个月，先到者为二保保养日期</b><br><br>
				<b style="font-size: 15px;">定保回厂数：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">二保回厂客户总数</b><br><br>
				<b style="font-size: 15px;">回厂率：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">定保回厂数与二保客户数之比</b><br><br>
				<b style="font-size: 15px;">定保：</b><br><br>
				<b style="font-size: 15px;">定保客户数：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">二保后的车辆每隔行驶里程5000公里或六个月的时间，为车辆的定保日期</b><br><br>
				<b style="font-size: 15px;">定保回厂数：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">定保回厂客户总数</b><br><br>
				<b style="font-size: 15px;">回厂率：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">定保回厂数与定保客户数之比</b><br><br>
				<b style="font-size: 15px;">合计：</b><br><br>
				<b style="font-size: 15px;">合计基盘：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">首保客户数与二保客户数与定保客户数之和</b><br><br>
				<b style="font-size: 15px;">合计回厂：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">二保回厂数与定保回厂数之和</b><br><br>
				<b style="font-size: 15px;">合计回厂率：</b>&nbsp;&nbsp;
				<b style="font-size: 12px;">合计回厂与合计基盘之比</b><br><br>
			</div>
		</el-dialog>
		<!--详情dialog-->
		<el-dialog title="详情" v-model="detailDialog" size="large">

		</el-dialog>

	</div>
</template>
<script>
import moment from 'moment'
import echarts from 'echarts'
export default {
	data: function() {
		return {
			area: '',
			brand: '',
			companyId: '',
			areaCombo2: [],
			brandCombo: [],
			companyCombo: [],
			loading: false,
			CurentPages: 1,
			page: this.page,
			detailDialog: false,
			//默认标签页
			tabsName: "first",
			//表格显示
			table: '1',
			//页码数
			CurentPage: 1,
			//每页的数量
			page: this.page,
			//分组数据
			dbCountData: {
				total: 0,
				dataList: []
			},
			//分组数据2
			sbCountData: {
				total: 0,
				dataList: []
			},
			baseMon: '',
			mDate: '',
			// 详情数组
			detailData: {
				total: 0,
				detailDataList: [],
			},
			textId: "",
			textType: "",
			//报表说明
			reportShow: false,
			//表内明细类型
			//detailType: "",
			datailType: "",
		}
	},
	methods: {
		//
		back: function() {
			this.$data.table = '1';
		},
		tabClick: function(tab) {


			this.$data.table = '1';

		},
		//查看报表说明
		lookReport: function() {
			this.$data.reportShow = true;
		},
		// 表内数据点击 // 首保回站
		textOnclick: function(index, id, type) {
			//alert(id);
			this.$data.loading = true; //显示loading
			this.$data.CurentPages = 1;
			this.$data.detailData.total = 0;
			this.$data.detailData.detailDataList = [];
			//首保回站明细
			this.$data.datailType = true;
			debugger;
			//alert(this.$data.datailType);
			this.$data.textId = id;
			this.$data.textType = type;
			this.sbQuery();
			this.$data.table = '3';

			debugger;

		},
		textOnclick1: function(index, id, type) {
			this.$data.loading = true; //显示loading
			this.$data.CurentPages = 1;
			this.$data.detailData.total = 0;
			this.$data.detailData.detailDataList = [];
			//基盘回站明细
			this.$data.datailType = false;
			debugger;
			//alert(this.$data.datailType);
			this.$data.textId = id;
			this.$data.textType = type;
			this.dbQuery();
			this.$data.table = '3';

			debugger;

		},
		sbQuery: function() {

			//首保回站明细
			this.$data.datailType = true;
			this.$data.detailDataList = []; //清空

			this.$http.get(this.API_ROOT + "/crm/kpi/sbByBackDetail", {
				params: {
					id: this.$data.textId,
					type: this.$data.textType,
					baseMon: this.$data.baseMon,
					mDate: this.$data.mDate,
					limit: this.page.pageSize,
					start: this.$data.CurentPages,
					companyId: this.$data.companyId
				}
			}).then(resp => {
				if (resp.data.success) {
					this.$data.detailData.detailDataList = resp.data.dataList;
					this.$data.detailData.total = parseInt(resp.data.total);
					this.$data.loading = false; //隐藏loading
				}

			});
			debugger;
		},
		dbQuery: function() {

			//基盘回站明细
			this.$data.datailType = false;
			this.$data.detailDataList = []; //清空

			this.$http.get(this.API_ROOT + "/crm/kpi/realByBackDetail", {
				params: {
					id: this.$data.textId,
					type: this.$data.textType,
					baseMon: this.$data.baseMon,
					mDate: this.$data.mDate,
					limit: this.page.pageSize,
					start: this.$data.CurentPages,
					companyId: this.$data.companyId
				}
			}).then(resp => {
				if (resp.data.success) {
					debugger;
					this.$data.detailData.detailDataList = resp.data.dataList;
					this.$data.detailData.total = parseInt(resp.data.total);
					this.$data.loading = false; //关闭loading
					debugger;
				}

			});
			debugger;
		},
		//表格转换
		change: function() {
			debugger;

			if (this.$data.table == '1') {
				this.$data.table = '2';
			} else if (this.$data.table == '2') {
				this.$data.table = '1';
			}
		},
		//首保回厂率
		sbBackRate: function(row, column) {
			return this.rateMath(row.sbBack, row.sb);
		},
		//首保月回厂率
		sbyBackRate: function(row, column) {
			return this.rateMath(row.sbyBack, row.sby);
		},
		//二保回厂率
		ebBackRate: function(row, column) {
			return this.rateMath(row.ebBack, row.eb);
		},
		//二保月回厂率
		ebyBackRate: function(row, column) {
			return this.rateMath(row.ebyBack, row.eby);
		},
		//定保回厂率
		dbBackRate: function(row, column) {
			return this.rateMath(row.dbBack, row.db);
		},
		//定保月回厂率
		dbyBackRate: function(row, column) {
			return this.rateMath(row.dbyBack, row.dby);
		},
		rateMath: function(num, nums) {
			if (nums == 0 || num == '0') {
				return '0';
			} else {
				return (num / nums * 100).toFixed(2) + "%";
			}
		},

		handleSizeChanges: function() {

		},
		//页面切换
		handleCurrentChanges: function(currentPage) {
			this.$data.CurentPages = currentPage;
			this.$data.loading = true; //显示loading
			debugger;

			if (this.$data.datailType) {
				this.sbQuery();
			} else {
				this.dbQuery();
			}

			debugger;
		},

		//查询
		baseQuery: function() {
			//alert(this.$data.tabsName);
			debugger;
			this.$data.table = '1';


			if (this.$data.baseMon == '') {
				this.$data.baseMon = this.moment(new Date()).subtract(6, 'month').format("YYYY-MM")
			} else {
				this.$data.baseMon = this.moment(this.$data.baseMon).format("YYYY-MM")

			}
			if (this.$data.mDate == '') {
				this.$data.mDate = this.moment(new Date()).format("YYYY-MM-DD")
			} else {
				this.$data.mDate = this.moment(this.$data.mDate).format("YYYY-MM-DD")

			}
			// 首保回站数据
			this.$http.get(this.API_ROOT + '/crm/kpi/sbByBack', {
				params: {
					mDate: this.$data.mDate,
					baseMon: this.$data.baseMon,
					companyId: this.$data.companyId
				}
			}).then(resp => {
				if (resp.data.success) {
					this.$data.sbCountData = resp.data;
				} else {
					//debugger;
					this.$message.error(resp.data.msg);
				}
			}, resp => { });
			// 保养回站数据
			this.$http.post(this.API_ROOT + '/crm/kpi/realByBack', this.$data.condition, {
				params: {
					mDate: this.$data.mDate,
					baseMon: this.$data.baseMon,
					companyId: this.$data.companyId
				}
			})
				.then(resp => {
					if (resp.data.success) {
						this.$data.dbCountData = resp.data;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => { });


			debugger;
		},
		//获取公司信息
		getCompanyInfo: function() {
			//this.$data.data.companyId = ""; //清空单位
			this.$data.companyId = ""; //清空单位
			this.$data.companyCombo = [];
			debugger;
			this.$http.get(this.API_ROOT + "/rbac/dept/all", {
				params: {
					area: this.$data.area,
					brand: this.$data.brand
				}
			}).then(resp => {
				this.$data.companyCombo = resp.data.dataList;
				if (this.$data.companyCombo.length > 0) {
					this.$data.companyId = this.$data.companyCombo[0].id;
				}
			});
		},
		//获取区域
		getarea: function() {

			debugger;
			this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
				params: {

				}
			}).then(resp => {
				this.$data.areaCombo2 = resp.data.dataList;
			});
		},
		//获取品牌
		getBrand: function() {
			debugger;
			this.$http.get(this.API_ROOT + "/rbac/dept/brand/all", {
				params: {}
			}).then(resp => {
				this.$data.brandCombo = resp.data.dataList;
			});
		},
		getAreaCombo: function() {

		},
		//资源类型转换
		timeCov: function(row, column) {
			if (row.buyDate == null || row.buyDate == "") {
				return "";
			}
			return this.moment(new Date(row.buyDate)).format("YYYY-MM-DD")
				;
		},

	},
	//表单创建时执行
	created: function() {
		//获取区域，品牌，公司信息
		this.getarea();
		this.getBrand();
		this.getCompanyInfo();
		//this.baseQuery();
	}
}
</script>